<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
</head>
<body>
<div class="content animated fadeIn">
    <div class="block block-fx-shadow hide" id="queryArea">
        <div class="block-content block-content-full">
            <form class="form-inline" method="post" id="queryForm">
                <label class="sr-only" for="name">分类名称</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary">分类名称</button>
                    </div>
                    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="name" name="name">
                </div>
                <label class="sr-only" for="state">状态</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary">状态</button>
                    </div>
                    <select class="form-control mb-2 mr-sm-2 mb-sm-0" id="state" name="state">
                        <option value="">全部</option>
                        <option value="true">开启</option>
                        <option value="false">关闭</option>
                    </select>
                </div>
                <button type="button" class="btn btn-alt-primary mr-5 hexo-query-submit">提交</button>
                <button type="reset" class="btn btn-alt-warning">重置</button>
            </form>
        </div>
    </div>
    <div class="block">
        <div class="block-header block-header-default">
            <h3 class="block-title"><i class="fa fa-bars"></i> 分类列表</h3>
            <div class="block-options">
                <div class="block-options-item" id="toolbar">
                    <button type="button" class="btn btn-secondary float-right hexo-query" data-query-area="queryArea"><i class="fa fa-search text-success mr-5"></i> 查询</button>
                    <button type="button" class="btn btn-secondary float-right mr-5 hexo-refresh"><i class="fa fa-refresh mr-5"></i> 刷新</button>
                    <button type="button" class="btn btn-secondary float-right mr-5 hexo-remove"><i class="fa fa-trash text-danger mr-5"></i> 删除</button>
                    <button type="button" class="btn btn-secondary float-right mr-5 hexo-edit" title="编辑分类" data-width="550" data-height="580" data-full="true"><i class="fa fa-edit text-warning mr-5"></i> 编辑</button>
                    <button type="button" class="btn btn-secondary float-right mr-5 hexo-add" title="新增分类" data-width="550" data-height="580" data-full="true"><i class="fa fa-plus-square text-primary mr-5"></i> 新增</button>
                    <a href="/categories/" class="btn btn-secondary float-right mr-5" target="_blank"><i class="fa fa-plane text-corporate mr-5"></i> 浏览</a>
                </div>
                <div class="btn-view-item" style="display: inline-block;padding: 6px 5px; line-height: 1.2;">
                    <div class="btn-group mr-5 float-right" role="group" aria-label="Second group" style="margin-left: 10px">
                        <button type="button" class="btn btn-secondary btn-view" id="view-list" title="表格">
                            <i class="fa fa-th-list"></i>
                        </button>
                        <button type="button" class="btn btn-secondary btn-view" id="view-grid" title="方格">
                            <i class="fa fa-th"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="block-content">
            <div id="data-view-list" class="data-view hide">
                <div class="table-responsive">
                    <table id="listTable" class="table table-striped table-vcenter">
                        <thead>
                        <tr>
                            <th class='text-center' width="5%" data-checkbox="true">
                                <label class="css-control css-control-primary css-checkbox" for="check-all" >
                                    <input type="checkbox" class="css-control-input" id="check-all">
                                    <span class="css-control-indicator"></span>
                                </label>
                            </th>
                            <th width="8%" data-field="coverUrl" data-formatter="urlFormatter">封面</th>
                            <th data-field="name">名称</th>
                            <th width="52%" data-field="remark">描述</th>
                            <th width="5%" align="center" data-field="state" data-formatter="stateFormatter">状态</th>
                            <th width="5%" align="center" data-field="sort">排序</th>
                            <th width="10%" align="center" data-formatter="actionFormatter">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div id="data-view-grid" class="data-view hide" style="height: 550px;overflow: auto">
                <div class="grid-content" id="gridContent" style="padding: 1rem;overflow-x: hidden;"></div>
                <nav aria-label="Page navigation" id="pageBar" style="margin-top: 1rem"></nav>
            </div>
        </div>
    </div>
</div>
<div th:replace="~{admin/common :: common-script}"></div>
<script th:inline="javascript">

    function urlFormatter(val, row) {
        return "<img src='" + val + "' width='32' height='32' alt='' />";
    }

    function switchChange($obj) {
        let id = $obj.data("id");
        let state = $obj.prop("checked");

        $.hexo.modal.confirm("确定要修改开关吗？", function() {
            $.hexo.action.sendRequest({
                url: BASE_URL + "/updateState.json",
                params: {"id": id, "state": state},
                callback: function (resp) {
                    if (resp.success) {
                        $.hexo.modal.tip("修改状态成功", "success", function () {
                            $.hexo.modal.close();
                            $.hexo.table.refreshData();
                        });
                    }
                }
            });
        }, function() {
            $.hexo.table.refreshData();
        });
    }

    function stateFormatter(val, row) {
        let checked = val ? 'checked' : '';
        let arr = [];
        arr.push('<label class="css-control css-control-sm css-control-success css-switch">');
        arr.push('<input type="checkbox" class="css-control-input" ' + checked + ' data-id="'+row.id+'" onclick="window.switchChange($(this))">');
        arr.push('<span class="css-control-indicator"></span>');
        arr.push('</label>');
        return arr.join("");
    }

    function actionFormatter(val, row) {
        let btnArr = [];
        btnArr.push('<div class="btn-group">');
        btnArr.push('<button type="button" class="btn btn-sm btn-secondary" data-toggle="tooltip" title="编辑分类" data-width="550" data-height="580"  data-full="true" onclick="$.hexo.action.showEditUI(\'' + row.id + '\', $(this))"><i class="fa fa-pencil"></i></button>');
        btnArr.push('<button type="button" class="btn btn-sm btn-secondary" data-toggle="tooltip" title="删除" onclick="$.hexo.action.remove(\'' + row.id + '\')"><i class="fa fa-times"></i></button>');
        btnArr.push("</div>");
        return btnArr.join("");
    }

    window.ToggleViewManager = {
        init: function() {
            $.ToggleView({
                key: "category-view",
                baseUrl: BASE_URL,
                initGrid: function(id) {
                    ToggleViewManager.query(id);
                }
            });
        },
        query: function(id) {
            if (id) {
                $("#data-" + id).show();
            }
            $("#toolbar").hide();
            $("#queryArea").slideUp("slow");
            $.hexo.action.sendRequest({
                url: BASE_URL + "/list.json",
                params: ToggleViewManager.params,
                callback: function (resp) {
                    ToggleViewManager.renderGrid(resp.data);
                    $("#totalNum").html("(" + resp.data.total + ")");
                }
            });
        },
        remove: function(id) {
            $.hexo.action.remove(id, function(resp) {
                ToggleViewManager.query();
            });
        },
        renderGrid: function(data) {
            ToggleViewManager.renderBody(data);
            ToggleViewManager.renderPageBar(data);
        },
        renderBody: function(data) {
            let list = data.list;
            let htmlArr = ['<div class="row row-deck">'];
            if (list && list.length > 0) {
                for (let i = 0; i < list.length; i ++) {
                    let obj = list[i];
                    htmlArr.push('<div class="col-md-3 col-sm-4">');
                    htmlArr.push('<div class="block text-center" style="border: 1px solid #eee">');
                    htmlArr.push('<div class="block-content block-content-full block-content-sm">');
                    htmlArr.push('<div class="font-w600">'+obj.name+'</div>');
                    htmlArr.push('</div>');
                    htmlArr.push('<div class="block-content block-content-full bg-image" style="background-image: url('+obj.coverUrl+');height: 160px">');
                    htmlArr.push('</div>');
                    htmlArr.push('<div class="block-content block-content-full">');
                    htmlArr.push('<button type="button" class="btn btn-circle btn-alt-success mr-5 mb-5 js-tooltip-enabled" data-full="true" onclick="$.hexo.action.showEditUI(\'' + obj.id + '\', $(this))">');
                    htmlArr.push('<i class="fa fa-pencil"></i>');
                    htmlArr.push('</button>');
                    htmlArr.push('<button type="button" class="btn btn-circle btn-alt-danger mr-5 mb-5 js-tooltip-enabled" onclick="window.ToggleViewManager.remove(\'' + obj.id + '\')">');
                    htmlArr.push('<i class="fa fa-times"></i>');
                    htmlArr.push('</button>');
                    htmlArr.push('</div>');
                    htmlArr.push('</div>');
                    htmlArr.push('</div>');
                }
            } else {
                htmlArr.push('<div class="col-md-12 col-lg-12 col-xl-12 animated fadeIn text-center"><h5>暂无分类</h5></div>');
            }

            htmlArr.push('</div>');

            $("#gridContent").html(htmlArr.join(""));
        },
        renderPageBar: function(data) {
            let $pageBar = $("#pageBar");
            if (!data.list || data.list.length === 0) {
                $pageBar.html("");
                return;
            }
            let pageArr = [];
            pageArr.push('<div class="left page-info-record" style="position: absolute"><span>当前页：'+data.pageNum+'，总共 '+data.total+' 条记录，每页显示 '+data.pageSize+' 条记录</span></div>');
            pageArr.push('<ul class="pagination justify-content-end mr-20">');
            pageArr.push('<li class="page-item">');
            pageArr.push('<a class="page-link" href="javascript:void(0)" aria-label="Previous" data-num="'+ data.prePage +'">');
            pageArr.push('<span aria-hidden="true">');
            pageArr.push('<i class="fa fa-angle-left"></i>');
            pageArr.push('</span>');
            pageArr.push('<span class="sr-only">Previous</span>');
            pageArr.push('</a>');
            pageArr.push('</li>');
            let currentNum = data.pageNum;
            let pageNumArr = data.navigatepageNums;
            for (let i = 0; i < pageNumArr.length; i ++) {
                let pageNum = pageNumArr[i];
                let activeClass = (currentNum === pageNum ? 'active' : '');
                pageArr.push('<li class="page-item ' + activeClass + '">');
                pageArr.push('<a class="page-link" href="javascript:void(0)" data-num="' + pageNum + '">' + pageNum + '</a>');
                pageArr.push('</li>');
            }
            pageArr.push('<li class="page-item">');
            pageArr.push('<a class="page-link" href="javascript:void(0)" aria-label="Next" data-num="'+ data.nextPage +'">');
            pageArr.push('<span aria-hidden="true">');
            pageArr.push('<i class="fa fa-angle-right"></i>');
            pageArr.push('</span>');
            pageArr.push('<span class="sr-only">Next</span>');
            pageArr.push('</a>');
            pageArr.push('</li>');
            pageArr.push('</ul>');

            $pageBar.html(pageArr.join("")).find("a").off("click").on("click", function (e) {
                let num = $(e.target).data("num");
                if (!num || num < 1 ) {
                    console.warn("=====当前列表不能翻页====");
                    return;
                }

                ToggleViewManager.params = $.extend({}, ToggleViewManager.params, {"pageNum": num});
                ToggleViewManager.query();
            });
        }
    };

    ToggleViewManager.init();

</script>
</body>
</html>